<template>
	<div class="infoForm no-trans">
		<div class="pageW">
			<div class="print-card" id="print-card-ref" ref="print-card-ref">
				<section>
					<div class="body top-wrap">
						<div class="logo-box">
							<img src="@img/logo-c.png" alt="" />
						</div>
						<div class="dianpu-box">
							{{ info.shop_info.shop_name || '' }}
						</div>
					</div>
				</section>
				<section>
					<div class="head">
						<div class="title">基本信息填写</div>
					</div>
					<div class="body">
						<el-form class="custom-form" ref="form" disabled label-position="top" :model="form" label-width="80px">
							<el-row :gutter="64">
								<el-col :span="8">
									<el-form-item label="姓名">
										<div class="value-cell">
											{{ form.user_name }}
										</div>
										<!-- <el-input v-model="form.user_name" placeholder=""></el-input> -->
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="性别">
										<div class="value-cell">
											{{ genderMap[Number(form.gender)] }}
										</div>
										<!-- <el-select style="width: 100%" v-model="form.gender" placeholder="">
											<el-option label="男" :value="1"></el-option>
											<el-option label="女" :value="2"></el-option>
										</el-select> -->
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="年龄">
										<!-- <el-input v-model="form.age" placeholder=""></el-input> -->
										<div class="value-cell">
											{{ form.age }}
										</div>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="出生日期">
										<!-- <el-date-picker style="width: 100%" v-model="form.birthday" value-format="yyyy-MM-dd" type="date" placeholder=""></el-date-picker> -->
										<div class="value-cell">
											{{ form.birthday }}
										</div>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="体重">
										<div class="value-cell">
											<div>{{ form.weight || 0 }}</div>
											<div>kg</div>
										</div>
										<!-- <el-input v-model="form.weight">
											<template slot="suffix">kg</template>
										</el-input> -->
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="身高">
										<div class="value-cell">
											<div>{{ form.height || 0 }}</div>
											<div>cm</div>
										</div>
										<!-- <el-input v-model="form.height">
											<template slot="suffix">cm</template>
										</el-input> -->
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="鞋码">
										<div class="value-cell">
											<div>{{ form.shoe_size }}</div>
										</div>
										<!-- <el-input v-model="form.shoe_size" placeholder=""></el-input> -->
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="联系电话">
										<div class="value-cell">
											<div>{{ form.phone }}</div>
										</div>
										<!-- <el-input v-model="form.phone" placeholder=""></el-input> -->
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</section>

				<section>
					<div class="head">
						<div class="title">客户主诉</div>
					</div>
					<div class="body">
						<div class="chechbox-list">
							<el-checkbox-group v-model="form.user_requirement" @change="khzsChange">
								<el-checkbox v-for="(item, i) in checkboxList" :key="i" :label="item.id" border>{{ item.value }}</el-checkbox>
							</el-checkbox-group>
						</div>
						<pre v-if="ifPrint" v-html="form.user_requirement_remark"></pre>
						<el-input
							v-else
							@change="khzsChange"
							type="textarea"
							:rows="6"
							placeholder="请详细描述客户主诉的具体情况.."
							v-model="form.user_requirement_remark"
						></el-input>
					</div>
				</section>

				<section>
					<div class="head">
						<div class="title">足部情况</div>
					</div>
					<div class="body">
						<h3 style="margin: 0">常见症状：</h3>
						<div class="chechbox-list-3">
							<div class="checkbox-item" v-for="(item, i) in options_cjzz" :key="i">
								<el-checkbox v-model="item.id" :true-label="item.label" false-label="" :border="!item.list">
									<div class="checkbox-inner">
										<div class="title">{{ item.label }}</div>

										<template v-if="item.list">
											<div class="select-value" v-if="ifPrint && item.opt">{{ item.opt }}</div>
											<el-select v-else style="width: 100px" v-model="item.opt" clearable placeholder="">
												<el-option v-for="(sub, sub_i) in item.list" :key="sub_i" :label="sub.label" :value="sub.label"></el-option>
											</el-select>
										</template>
										<template v-else></template>
									</div>
								</el-checkbox>
							</div>
						</div>
						<div class="row-2">
							<div class="tips">
								<h4>标记老茧及疼痛位置：</h4>
								<el-radio-group v-model="form.biaozhuType">
									<el-radio :label="1">老茧黑色标注</el-radio>
									<el-radio :label="2">疼痛红色标注</el-radio>
								</el-radio-group>
							</div>
							<div class="jiao-tip-box">
								<div class="jiao-box">
									<div class="item">
										<div class="title">右脚</div>
										<div class="item-jiao">
											<div class="jiao jiao-1">
												<img src="@img/right-foot.png" alt="" />
												<div
													class="dot"
													v-for="(item, index) in left_info"
													:style="{
														left: `${pxToVw(item.x)}`,
														top: `${pxToVw(item.y)}`,
														backgroundColor: bgColorMap[Number(item.type)],
														color: item.type ? '#fff' : ''
													}"
													:key="index"
													@click="clickDot(item)"
												>
													<el-tooltip effect="light" :content="item.title" placement="top">
														<span>{{ item.id }}</span>
													</el-tooltip>
												</div>
											</div>
										</div>
									</div>
									<div class="item">
										<div class="title">左脚</div>
										<div class="item-jiao">
											<div class="jiao jiao-2">
												<img src="@img/left-foot.png" alt="" />
												<div
													class="dot"
													v-for="(item, index) in right_info"
													:style="{
														left: `${pxToVw(item.x)}`,
														top: `${pxToVw(item.y)}`,
														backgroundColor: bgColorMap[Number(item.type)],
														color: item.type ? '#fff' : ''
													}"
													:key="index"
													@click="clickDot(item)"
												>
													<el-tooltip effect="light" :content="item.title" placement="top">
														<span>{{ item.id }}</span>
													</el-tooltip>
												</div>
											</div>
										</div>
									</div>
									<div class="tip-box">
										<div class="item">
											<p>1-右-第一跖趾关节(拇外翻)</p>
											<p>2-右-第二跖趾关节</p>
											<p>3-右-第三跖趾关节</p>
											<p>4-右-第四跖趾关节</p>
											<p>5-右-第五跖趾关节(小趾外侧)</p>
											<p>6-右-中足</p>
											<p>7-右-足底筋膜</p>
											<p>8-右-足跟</p>
											<p>9-右-内踝</p>
											<p>10-右-外踝</p>
											<p>11-右-脚背</p>
											<p>12-右-第二脚趾上方</p>
											<p>13-右-第三脚趾上方</p>
											<p>14-右-舟骨(副舟骨)</p>
										</div>
										<div class="item">
											<p>1-左-第一跖趾关节(拇外翻)</p>
											<p>2-左-第二跖趾关节</p>
											<p>3-左-第三跖趾关节</p>
											<p>4-左-第四跖趾关节</p>
											<p>5-左-第五跖趾关节(小趾外侧)</p>
											<p>6-左-中足</p>
											<p>7-左-足底筋膜</p>
											<p>8-左-足跟</p>
											<p>9-左-内踝</p>
											<p>10-左-外踝</p>
											<p>11-左-脚背</p>
											<p>12-左-第二脚趾上方</p>
											<p>13-左-第三脚趾上方</p>
											<p>14-左-舟骨(副舟骨)</p>
										</div>
									</div>
								</div>
							</div>
						</div>

						<h3>力线症状：</h3>
						<div class="chechbox-list chechbox-list-002">
							<div class="checkbox-item">
								<el-checkbox v-for="(item, i) in options_lxzz" :key="i" v-model="item.id" :true-label="item.label" false-label="" :border="!item.list">
									<div class="checkbox-inner">
										<div class="title">{{ item.label }}</div>

										<template v-if="item.list">
											<div class="select-value" v-if="ifPrint && item.opt">{{ item.opt }}</div>
											<el-select v-else style="width: 100px" v-model="item.opt" clearable placeholder="">
												<el-option v-for="(sub, sub_i) in item.list" :key="sub_i" :label="sub.label" :value="sub.label"></el-option>
											</el-select>
										</template>
									</div>
								</el-checkbox>
							</div>
						</div>
						<h3>足部症状：</h3>
						<div class="chechbox-list-3">
							<div class="checkbox-item" v-for="(item, i) in options_zbzz" :key="i">
								<el-checkbox v-model="item.id" :true-label="item.label" false-label="" :border="!item.list">
									<div class="checkbox-inner">
										<div class="title">{{ item.label }}</div>

										<template v-if="item.list">
											<div class="select-value" v-if="ifPrint && item.opt">{{ item.opt }}</div>
											<el-select v-else style="width: 100px" v-model="item.opt" clearable placeholder="">
												<el-option v-for="(sub, sub_i) in item.list" :key="sub_i" :label="sub.label" :value="sub.label"></el-option>
											</el-select>
										</template>
										<template v-else></template>
									</div>
								</el-checkbox>
							</div>
						</div>

						<!-- <div class="chechbox-list">
							<el-checkbox-group v-model="form.foot_symptoms">
								<el-checkbox v-for="(item, i) in options_zbzz" :key="i" :label="item.id" border>{{ item.label }}</el-checkbox>
							</el-checkbox-group>
						</div> -->

						<h3>膝部症状：</h3>
						<div class="chechbox-list break_page">
							<el-checkbox-group v-model="form.knee_symptoms">
								<el-checkbox v-for="(item, i) in options_xbzz" :key="i" :label="item.id" border>
									<div v-if="item.input" class="checkbox-inner">
										<p>长短腿（左腿长度</p>
										<input :disabled="!form.knee_symptoms.includes(item.id)" v-model="form_xbzz.ztcd" type="text" />
										<p>mm，右腿长度</p>
										<input :disabled="!form.knee_symptoms.includes(item.id)" v-model="form_xbzz.ytcd" type="text" />
										<p>mm，差距</p>
										<input :disabled="!form.knee_symptoms.includes(item.id)" v-model="form_xbzz.cj" type="text" />
										<p>mm）</p>
										<input :disabled="!form.knee_symptoms.includes(item.id)" v-model="form_xbzz.c" type="text" />
										<p>长</p>
										<input :disabled="!form.knee_symptoms.includes(item.id)" v-model="form_xbzz.d" type="text" />
										<p>短</p>
									</div>
									<div v-else class="checkbox-inner">
										{{ item.label }}
									</div>
								</el-checkbox>
							</el-checkbox-group>
						</div>

						<h3>背部症状：</h3>
						<div class="chechbox-list">
							<el-checkbox-group v-model="form.back_symptoms">
								<el-checkbox v-for="(item, i) in options_bbzz" :key="i" :label="item.id" border>
									<div v-if="item.input" class="checkbox-inner">
										<p>高低肩（</p>
										<input :disabled="!form.back_symptoms.includes(item.id)" v-model="form_bbzz.g" type="text" />
										<p>高</p>
										<input :disabled="!form.back_symptoms.includes(item.id)" v-model="form_bbzz.d" type="text" />
										<p>低）</p>
									</div>
									<div v-else class="checkbox-inner">
										{{ item.label }}
									</div>
								</el-checkbox>
							</el-checkbox-group>
						</div>

						<el-form class="custom-form" ref="form" label-position="top" :model="form" label-width="80px">
							<el-row :gutter="0">
								<el-col :span="24">
									<el-form-item label="">
										<template slot="label">
											<div class="custom-label">
												<p style="padding-right: 10px">骨盆倾斜（</p>
												<div class="chechbox-list" style="margin: 0; padding-bottom: 0">
													<el-checkbox-group v-model="checkboxGroup">
														<el-checkbox v-for="(item, i) in options_gpqx" :key="i" :label="item.id">
															<div v-if="item.input" class="checkbox-inner">
																<p>上下倾斜：</p>
																<input :disabled="!checkboxGroup.includes(item.id)" v-model="form_gpqx.g" type="text" />
																<p>高</p>
																<input :disabled="!checkboxGroup.includes(item.id)" v-model="form_gpqx.d" type="text" />
																<p>低）</p>
															</div>
															<div v-else class="checkbox-inner">
																{{ item.label }}
															</div>
														</el-checkbox>
													</el-checkbox-group>
												</div>
											</div>
										</template>
										<pre v-if="ifPrint" v-html="form.back_remark"></pre>
										<el-input v-else type="textarea" :rows="4" placeholder="请填写详细情况" v-model="form.back_remark"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</section>

				<section>
					<div class="head">
						<div class="title">适配鞋型</div>
					</div>
					<div class="body">
						<div class="radioList" style="margin-bottom: 30px">
							<el-radio-group v-model="form.shoes_type">
								<el-radio label="1" border>运动鞋</el-radio>
								<el-radio label="2" border>休闲鞋</el-radio>
								<el-radio label="3" border>皮鞋</el-radio>
							</el-radio-group>
						</div>
						<el-form class="custom-form" ref="form" label-position="top" :model="form" label-width="80px">
							<el-row :gutter="64">
								<el-col :span="6">
									<el-form-item label="鞋帮高度">
										<div class="radioList">
											<el-radio-group v-model="form.shoes_upper_type">
												<el-radio label="1" border>高</el-radio>
												<el-radio label="2" border>中</el-radio>
												<el-radio label="3" border>低</el-radio>
											</el-radio-group>
										</div>
									</el-form-item>
								</el-col>
								<el-col :span="18">
									<el-form-item label="原鞋垫尺寸">
										<div class="input-group">
											<el-input v-model="form.shoes_upper_info.top">
												<template slot="prefix">上长</template>
												<template slot="suffix">mm</template>
											</el-input>
											<el-input v-model="form.shoes_upper_info.botton">
												<template slot="prefix">下长</template>
												<template slot="suffix">mm</template>
											</el-input>
											<el-input v-model="form.shoes_upper_info.left">
												<template slot="prefix">前掌宽</template>
												<template slot="suffix">mm</template>
											</el-input>
											<el-input v-model="form.shoes_upper_info.center">
												<template slot="prefix">中足宽</template>
												<template slot="suffix">mm</template>
											</el-input>
											<el-input v-model="form.shoes_upper_info.right">
												<template slot="prefix">后跟宽</template>
												<template slot="suffix">mm</template>
											</el-input>
										</div>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</section>

				<section>
					<div class="head">
						<div class="title">定制类型</div>
					</div>
					<div class="body">
						<div class="chechbox-list-2">
							<div class="item-checkbox" v-for="(item, index) in options_dzlx" :key="index">
								<div class="checkbox">
									<el-checkbox
										v-model="item.id"
										@change="setDefaultOpt($event, item)"
										:true-label="item.label"
										false-label=""
										:label="item.label"
										border
									></el-checkbox>
								</div>
								<!-- <div class="radio">
									<el-radio-group v-model="item.opt" :disabled="!item.id">
										<el-radio v-for="(sub, i) in item.list" :key="i" :label="sub.label">{{ sub.label }}</el-radio>
									</el-radio-group>
								</div> -->
								<div class="checkbox-list-4">
									<el-checkbox-group :disabled="!item.id" v-model="item.opt">
										<el-checkbox v-for="(sub, i) in item.list" :key="i" :label="sub.label">{{ sub.label }}</el-checkbox>
									</el-checkbox-group>
								</div>
								<!-- <div class="radio">
									<el-radio-group v-model="item.opt" :disabled="!item.id">
										<el-radio v-for="(sub, i) in item.list" :key="i" :label="sub.label">{{ sub.label }}</el-radio>
									</el-radio-group>
								</div> -->
							</div>
						</div>
					</div>
				</section>

				<section>
					<div class="head">
						<div class="title">定制需求</div>
					</div>
					<div class="body">
						<div class="radioList" style="margin-bottom: 30px">
							<el-radio-group v-model="form.custom_type">
								<el-radio label="1" border>以适应性为主</el-radio>
								<el-radio label="2" border>以矫形为主</el-radio>
							</el-radio-group>
						</div>
					</div>
				</section>

				<section>
					<div class="head">
						<div class="title">综合测评数据</div>
					</div>
					<div class="body">
						<el-form class="custom-form" ref="form" label-position="top" :model="form" label-width="80px">
							<el-row :gutter="64">
								<el-col :span="24">
									<el-form-item label="足部综合问题">
										<template slot="label">
											足部综合问题
											<span style="color: red">（ * 必要补充：足部疼痛或术后需要加减压负荷的区域 ）</span>
										</template>
										<pre v-if="ifPrint" v-html="form.check_result"></pre>
										<el-input v-else type="textarea" :autosize="{ minRows: 6, maxRows: 6 }" placeholder="" v-model="form.check_result"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="解决方案建议">
										<pre v-if="ifPrint" v-html="form.check_suggest"></pre>
										<el-input v-else type="textarea" :autosize="{ minRows: 6, maxRows: 6 }" placeholder="" v-model="form.check_suggest"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</section>
				<section>
					<div class="body">
						<div class="bottom-wrap">
							<div class="item">
								<div class="label">操作人</div>
								<div class="value">{{ info.op_user_info.user_name }}</div>
							</div>
							<div class="item">
								<div class="label">操作时间</div>
								<div class="value">{{ getNowFormatDate() }}</div>
							</div>
						</div>
					</div>
				</section>
			</div>

			<div class="footer-active">
				<el-button @click="clickBtns({ flag: '取消' })" class="footer-active-1">
					<img src="@img/001.png" alt="" />
					<span>取消</span>
				</el-button>
				<el-button :loading="createPdfLoad" @click="clickBtns({ flag: 'PDF预览' })" class="footer-active-2">
					<img src="@img/002.png" alt="" />
					<span>PDF预览</span>
				</el-button>
				<el-button :loading="saveLoad" @click="clickBtns({ flag: '保存并退出' })" class="footer-active-3">
					<img src="@img/003.png" alt="" />
					<span>{{ saveLoad ? '正在提交请等待...' : '保存并退出' }}</span>
				</el-button>
			</div>
		</div>
		<pagePopIsFc ref="pagePopIsFc" @activeOver="save"></pagePopIsFc>
	</div>
</template>

<script>
import pagePopIsFc from '@/components/common/pagePopIsFc';
import uploader from '@/components/common/uploader';
import { calculateAge, formatDate, getNowFormatDate } from '@/utils/dateUtil.js';
import htmlToPdf from '@/utils/htmlToPdf.js';
import { left_info, right_info, options_cjzz, options_lxzz, options_zbzz, options_xbzz, options_bbzz, options_gpqx, options_dzlx } from '@/views/pc/options';
function debounce(fn, delay) {
	let timer;
	return function (...args) {
		// 每次事件触发时，清除上一次的定时器
		clearTimeout(timer);
		// 设置新的定时器
		timer = setTimeout(() => {
			fn.apply(this, args); // 使用 `apply` 使得 `this` 和参数正确
		}, delay);
	};
}
export default {
	name: 'infoForm',
	components: { uploader, pagePopIsFc },
	data() {
		return {
			getNowFormatDate,
			left_info,
			right_info,
			options_cjzz,
			options_lxzz,
			options_zbzz,
			options_xbzz,
			options_bbzz,
			options_gpqx,
			options_dzlx,
			bgColorMap: {
				1: '#333333',
				2: '#D30A0A'
			},
			checkboxGroup: [],
			checkboxList: [],
			form_xbzz: {},
			form_bbzz: {},
			form_gpqx: {},
			form: {
				biaozhuType: 1,
				user_requirement: [],
				foot_symptoms: [],
				knee_symptoms: [],
				back_symptoms: [],
				shoes_upper_info: { top: 0, left: 0, right: 0, center: 0, botton: 0 }
			},
			createPdfLoad: false,
			saveLoad: false,
			ifPrint: false,
			info: { op_user_info: {}, shop_info: {} }
		};
	},
	computed: {
		pxToVw() {
			return (px) => {
				let vw = `${(px / this.mixViewportWidth) * 100}vw`;
				return vw; // 转换成vw
			};
		}
	},
	created() {},
	mounted() {
		this.init();
	},
	methods: {
		setDefaultOpt($event, item) {
			if (item.id) {
				let list = item.list;
				let itemOne = list.find((v) => 1) || {};
				this.$set(item, 'opt', []);
			} else {
				this.$set(item, 'opt', []);
			}
		},
		clickBtns({ flag }) {
			if (flag == 'PDF预览') {
				this.ifPrint = true;
				this.$nextTick(() => {
					let element = this.$refs['print-card-ref'];
					let pdf = new htmlToPdf(element, 'pdf', true);
					let base64Pdf = '';
					this.createPdfLoad = true;
					let file_name = `${this.form?.user_name}-${this.info?.shop_info?.shop_name}`;
					pdf.outPutPdfFn(file_name).then((res) => {
						this.createPdfLoad = false;
						base64Pdf = res;
						this.ifPrint = false;
					});
				});
				return;
			}
			if (flag == '保存并退出') {
				this.$refs.pagePopIsFc.init();
				return;
			}
			if (flag == '取消') {
				this.toBack();
				return;
			}
		},
		async save() {
			this.ifPrint = true;
			this.$nextTick(async () => {
				let element = this.$refs['print-card-ref'];
				let pdf = new htmlToPdf(element, 'pdf', false);
				this.saveLoad = true;
				let file_name = `${this.form?.user_name}-${this.info?.shop_info?.shop_name}`;
				let file = await pdf.outPutPdfFn(file_name);
				this.saveLoad = false;
				let check_pdf_url = '';
				try {
					let params = {
						// check_id: this.$route.query.check_id,
						// report_name 改为 "客户姓名-店铺名"
						// report_name: `综合检测报告`,
						file_name
						// report: file
					};
					console.log(params, '-----params');
					this.saveLoad = true;
					const formData = new FormData();
					formData.append('file_content', file);
					let res = await this.$uploadApi('check/device_report/upload', formData, params);
					this.saveLoad = false;
					if (res.code == 200) {
						check_pdf_url = res.data.data.report_url;
					}
				} catch (error) {
					//TODO handle the exception
				}
				let user_requirement = this.form.user_requirement.join(',');
				let shoes_upper_info = JSON.stringify(this.form.shoes_upper_info);
				let options_dzlx = this.options_dzlx.map((v) => {
					let vOpts = v.opt;
					let optStr = vOpts.join(',');
					return {
						id: v.id,
						opt: optStr
					};
				});
				// console.log(options_dzlx,'---------options_dzlx');
				// return;
				let common_symptoms = {
					info: [],
					left_info: this.left_info,
					right_info: this.right_info
				};
				if (this.options_cjzz.length) {
					common_symptoms.info = this.options_cjzz.map((v) => {
						return {
							id: v.id,
							opt: v.opt
						};
					});
				}
				let force_line_symptoms = this.options_lxzz.map((v) => {
					return {
						id: v.id,
						opt: v.opt
					};
				});
				// let foot_symptoms = this.form.foot_symptoms.join(',');
				let foot_symptoms = [];
				if (this.options_zbzz.length) {
					foot_symptoms = this.options_zbzz.map((v) => {
						return {
							id: v.id,
							opt: v.opt
						};
					});
				}

				let knee_symptoms = this.form.knee_symptoms.map((id) => {
					let item = this.options_xbzz.find((v) => v.id == id) || {};
					let form = null;
					if (item.input) {
						form = this.form_xbzz;
					}
					return {
						id,
						form
					};
				});

				let back_symptoms1 = this.form.back_symptoms.map((id) => {
					let item = this.options_bbzz.find((v) => v.id == id) || {};
					let form_bbzz = null;
					if (item.input) {
						form_bbzz = this.form_bbzz;
					}
					return {
						id,
						form_bbzz
					};
				});

				let back_symptoms2 = this.checkboxGroup.map((id) => {
					let item = this.options_gpqx.find((v) => v.id == id) || {};
					let form_gpqx = null;
					if (item.input) {
						form_gpqx = this.form_gpqx;
					}
					return {
						id,
						form_gpqx
					};
				});
				let back_symptoms = [...back_symptoms1, ...back_symptoms2];

				let params = {
					check_id: this.$route.query.check_id,
					user_id: this.$route.query.user_id,
					...this.form,
					user_requirement,
					shoes_upper_info,
					custom_info: JSON.stringify(options_dzlx),
					common_symptoms: JSON.stringify(common_symptoms),
					force_line_symptoms: JSON.stringify(force_line_symptoms),
					foot_symptoms: JSON.stringify(foot_symptoms),
					knee_symptoms: JSON.stringify(knee_symptoms),
					back_symptoms: JSON.stringify(back_symptoms),
					check_pdf_url
				};
				console.log({ ...params });
				this.saveLoad = true;
				this.$api('check/check_detail/record', params, 'post').then((res) => {
					this.saveLoad = false;
					this.ifPrint = false;
					if (res.code == 200) {
						this.getCheckDetail();
						this.toBack();
					}
				});
			});
		},
		clickDot(item) {
			let biaozhuType = this.form.biaozhuType;
			if (item.type == biaozhuType) {
				this.$set(item, 'type', '');
			} else {
				this.$set(item, 'type', biaozhuType);
			}
			console.log({ ...item }, '----item');
		},
		async init() {
			let checkUser = {};
			try {
				checkUser = JSON.parse(sessionStorage.getItem('checkUser')) || {};
			} catch (error) {
				//TODO handle the exception
			}
			Object.assign(this.form, checkUser.user_info);
			this.$set(this.form, 'age', calculateAge(this.form.birthday));

			{
				const res = await this.$api('check/config/check_kv', { keys: ['user_requirement'] }, 'post');
				if (res.code == 200) {
					this.checkboxList = res.data?.data?.user_requirement || [];
				}
				this.getCheckDetail();
			}

			this.$api('check/user/detail', { user_id: this.$route.query.user_id }, 'post').then((res) => {
				if (res.code == 200) {
					this.info = res.data.data;
				}
			});
		},
		khzsChange() {
			this.update();
		},
		update: debounce(function () {
			let user_requirement = this.form.user_requirement.join(',');
			this.$api(
				'check/check_detail/record',
				{
					check_id: this.$route.query.check_id,
					user_id: this.$route.query.user_id,
					...this.form,
					user_requirement
				},
				'post'
			).then((res) => {
				if (res.code == 200) {
					this.getCheckDetail();
				}
			});
		}, 1000),
		getCheckDetail() {
			this.$api('check/check_detail/detail', { check_id: this.$route.query.check_id }, 'post').then((res) => {
				if (res.code == 200) {
					let data = res.data.data;
					this.checkInfo = data;
					let user_requirement = data.user_requirement.split(',').map((v) => Number(v));
					this.$set(this.form, 'user_requirement', user_requirement);
					this.$set(this.form, 'user_requirement_remark', data.user_requirement_remark);
					this.$set(this.form, 'check_result', data.check_result);
					this.$set(this.form, 'check_suggest', data.check_suggest);
					this.$set(this.form, 'custom_type', data.custom_type);
					if (data.custom_info) {
						let custom_info = JSON.parse(data.custom_info);
						this.options_dzlx.forEach((item, index) => {
							let obj = custom_info[index];
							this.$set(item, 'id', obj.id);
							let optArr = obj.opt.split(',');
							this.$set(item, 'opt', optArr);
						});
					}

					if (data.shoes_upper_info) {
						let shoes_upper_info = JSON.parse(data.shoes_upper_info);
						this.$set(this.form, 'shoes_upper_info', shoes_upper_info);
					}

					this.$set(this.form, 'shoes_type', data.shoes_type);
					this.$set(this.form, 'shoes_upper_type', data.shoes_upper_type);

					if (data.common_symptoms) {
						let common_symptoms = JSON.parse(data.common_symptoms);
						this.options_cjzz.forEach((item, index) => {
							let obj = common_symptoms.info[index];
							this.$set(item, 'id', obj.id);
							this.$set(item, 'opt', obj.opt);
						});
						this.$set(this, 'left_info', common_symptoms.left_info);
						this.$set(this, 'right_info', common_symptoms.right_info);
					}

					if (data.force_line_symptoms) {
						let force_line_symptoms = JSON.parse(data.force_line_symptoms);
						this.options_lxzz.forEach((item, index) => {
							let obj = force_line_symptoms[index];
							this.$set(item, 'id', obj.id);
							this.$set(item, 'opt', obj.opt);
						});
					}
					// let foot_symptoms = data.foot_symptoms.split(',').map((v) => Number(v));
					// this.$set(this.form, 'foot_symptoms', foot_symptoms);
					if (data.knee_symptoms) {
						let knee_symptoms = JSON.parse(data.knee_symptoms);
						let knee_symptoms_ids = [];
						knee_symptoms.forEach((item, index) => {
							knee_symptoms_ids.push(item.id);
							if (item.form) {
								this.$set(this, 'form_xbzz', item.form);
							}
						});
						this.$set(this.form, 'knee_symptoms', knee_symptoms_ids);
					}

					if (data.back_symptoms) {
						let back_symptoms = JSON.parse(data.back_symptoms);
						let back_symptoms_ids = [];
						back_symptoms.forEach((item, index) => {
							back_symptoms_ids.push(item.id);
							if (item.form_bbzz) {
								this.$set(this, 'form_bbzz', item.form_bbzz);
							}

							if (item.form_gpqx) {
								this.$set(this, 'form_gpqx', item.form_gpqx);
							}
						});
						this.$set(this.form, 'back_symptoms', back_symptoms_ids);
						this.$set(this, 'checkboxGroup', back_symptoms_ids);
					}
					this.$set(this.form, 'back_remark', data.back_remark);
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
// @media print {
// 	@page {
// 		margin: 0; // 可以控制打印布局（四周边距）
// 		size: A4 portrait; /* A4纸张，纵向 */
// 	}
// }
.infoForm {
	width: 100%;
	min-height: 100vh;
	background: #f1f1f1;
	.pageW {
		width: @width;
		margin: auto;
		padding: 25px 0;
		padding-bottom: 100px;
		.custom-weizhi {
			.bor();
			position: relative;
			top: -500px;
			margin-bottom: 0;
		}
		/deep/.el-input__inner {
			color: #000;
			font-size: 18px;
		}
		/deep/.el-textarea__inner {
			color: #000;
			font-size: 18px !important;
		}
		.value-cell {
			display: flex;
			font-size: 18px;
			color: #000;
		}
		.select-value {
			font-size: 18px;
			color: #000;
			border: 1px solid #ccc;
			padding: 10px;
			min-width: 100px;
		}
		.custom-label {
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 18px;
			color: #000;
		}
		.footer-active {
			position: fixed;
			z-index: 99;
			width: 100%;
			bottom: 0;
			left: 0;
			background: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
			backdrop-filter: blur(10px); /* 模糊效果 */
			box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
			padding: 10px;
			display: flex;
			justify-content: center;
			.footer-active-1 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 160px;
				height: 54px;
				background: #b1b1b1;
				border-radius: 10px;
				border: 1px solid #ffffff;
				font-weight: bold;
				font-size: 16px;
				color: #ffffff;
				font-style: normal;
				img {
					margin-right: 10px;
					vertical-align: middle;
				}
				/deep/span {
					display: flex;
					align-items: center;
				}
			}
			.footer-active-2 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 160px;
				height: 54px;
				background: #049669;
				border-radius: 10px;
				border: 1px solid #ffffff;
				font-weight: bold;
				font-size: 16px;
				color: #ffffff;
				font-style: normal;
				img {
					margin-right: 10px;
					vertical-align: middle;
				}
				/deep/span {
					display: flex;
					align-items: center;
				}
			}
			.footer-active-3 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 160px;
				height: 54px;
				background: #ff8302;
				border-radius: 10px;
				border: 1px solid #ffffff;
				font-weight: bold;
				font-size: 16px;
				color: #ffffff;
				font-style: normal;
				img {
					margin-right: 10px;
					vertical-align: middle;
				}
				/deep/span {
					display: flex;
					align-items: center;
				}
			}
		}
		.head {
			padding: 20px 25px;
			border-bottom: 1px solid #e5e5e5;
			background: #fff;
			.title {
				display: flex;
				align-items: center;
				vertical-align: middle;
				&:before {
					content: '';
					vertical-align: middle;
					display: inline-block;
					width: 6px;
					height: 20px;
					margin-right: 20px;
					background: linear-gradient(#fc5f10 0%, #ffa949 100%);
					border-radius: 4px;
				}
				font-weight: bold;
				font-size: 24px;
				color: #333333;
				line-height: 25px;
				text-align: left;
				font-style: normal;
			}
		}
		.body {
			padding: 20px 40px 20px;
			background: #fff;
			pre {
				font-size: 20px;
				color: #000;
				line-height: 24px;
				margin: 0;
				min-height: 100px;
				border: 1px solid #ccc;
				padding: 10px;
				border-radius: 4px;
			}
			h3 {
				font-size: 18px;
				padding-bottom: 20px;
				// margin-bottom: 30px;
				margin-top: 30px;
			}
			.row-2 {
				display: flex;
				/deep/.el-radio-group {
					display: flex;
					flex-direction: column;
					gap: 20px;
					// color: #000;
					.el-radio__label {
						font-size: 18px !important;
					}
				}
				.jiao-tip-box {
					display: flex;
				}
				.tips {
					padding-top: 30px;
					padding-right: 82px;
					h4 {
						font-weight: bold;
						font-size: 18px;
						color: #333333;
						line-height: 20px;
						text-align: left;
						padding-bottom: 20px;
						font-style: normal;
					}
					p {
						margin-top: 9px;
						font-weight: 400;
						font-size: 14px;
						color: #333333;
						line-height: 20px;
						text-align: left;
						font-style: normal;
					}
				}
			}

			.tip-box {
				display: flex;
				margin-left: 100px;
				.item {
					padding-right: 80px;
					p {
						font-weight: 600;
						font-size: 16px;
						color: #d30a0a;
						line-height: 26px;
						text-align: left;
						font-style: normal;
					}
				}
			}
			.jiao-box {
				display: flex;
				// padding-left: 200px;
				.item {
					.title {
						padding-bottom: 10px;
						font-weight: 800;
						font-size: 18px;
						color: #333333;
						line-height: 21px;
						text-align: left;
						font-style: normal;
					}
				}
				.item-jiao {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 30px;
					width: 204px;
					height: 204px;
					background: #ffffff;
					border-radius: 10px;
					border: 1px solid #979797;
					.jiao {
						position: relative;
						width: 87px;
						height: 193px;
						img {
							width: 100%;
							height: 100%;
						}
						.dot {
							display: flex;
							align-items: center;
							justify-content: center;
							position: absolute;
							width: 22px;
							height: 22px;
							background: #dceaf9;
							border: 1px solid #333333;
							border-radius: 50%;
							cursor: pointer;
							font-weight: 800;
							font-size: 12px;
							color: #333333;
							line-height: 17px;
							font-style: normal;
						}
					}
					.jiao-1 {
						width: 166px;
						height: 194px;
						img {
						}
					}
					.jiao-2 {
						width: 171px;
						height: 190px;
						img {
						}
					}
				}
			}
			/deep/.el-form.custom-form.el-form--label-top {
				.el-form-item {
					margin-bottom: 20px;
					.el-form-item__label {
						padding: 0;
					}
					.el-input.is-disabled .el-input__inner {
						background: #fff;
						color: #606266;
					}
					.el-input {
						display: inline-flex;
						align-items: center;
						font-size: 16px !important;
						.el-input__inner {
							display: flex;
							align-items: center;
						}
					}
				}
			}
			/deep/.el-textarea__inner {
				font-size: 16px;
			}
			.radioList {
				/deep/.el-radio-group {
					display: flex;
					flex-wrap: wrap;
					gap: 10px;
					.el-radio {
						margin: 0;
						.el-radio__label {
							font-size: 18px !important;
							color: #000;
						}
					}
				}
			}
			.chechbox-list-002 {
				.checkbox-item {
					display: flex;
					flex-wrap: wrap;
					gap: 10px;
				}
			}
			.chechbox-list {
				// height: 100px;
				padding-bottom: 24px;
				/deep/.el-checkbox-group {
					display: flex;
					flex-wrap: wrap;
					gap: 10px;
					.el-checkbox {
						margin: 0;
						.el-checkbox__label {
							font-size: 18px !important;
							color: #000;
						}
					}
				}
				.checkbox-inner {
					display: flex;
					align-items: center;
					.title {
						padding-right: 20px;
						font-size: 16px;
						font-size: 18px;
						color: #000;
					}
					input {
						border-bottom: 1px solid @theme;
						width: 40px;
						text-align: center;
					}
					input[disabled] {
						border-bottom: 1px solid #000;
					}
					p {
					}
				}
			}

			.chechbox-list-2 {
				display: flex;
				gap: 30px;
				.checkbox-list-4 {
					/deep/.el-checkbox-group {
						padding-top: 10px;
						display: flex;
						flex-wrap: wrap;
						gap: 10px;
					}
				}
				.item-checkbox {
					display: flex;
					flex-direction: column;
					width: calc(100% / 4);
					.checkbox {
						/deep/.el-checkbox {
							margin: 0;
							.el-checkbox__label {
								font-size: 18px !important;
								color: #000;
							}
						}
					}
					.radio {
						padding-top: 20px;
						/deep/.el-radio-group {
							display: flex;
							flex-wrap: wrap;
							gap: 10px;
							.el-radio {
								margin: 0;
								.el-radio__label {
									font-size: 18px !important;
									color: #000;
								}
							}
						}
					}
				}
			}
			.chechbox-list-3 {
				// height: 100px;
				padding-bottom: 24px;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: 20px;
				.checkbox-item {
				}
				/deep/.el-checkbox-group {
					display: flex;
					flex-wrap: wrap;
					gap: 10px;
					.el-checkbox {
						margin: 0;
					}
				}
				.checkbox-inner {
					display: flex;
					align-items: center;
					.title {
						padding-right: 20px;
						font-size: 18px;
						color: #000;
					}
				}
			}
		}
		section {
			background: #ffffff;
			border-radius: 10px;
			margin-top: 10px;
			overflow: hidden;
			.top-wrap {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.logo-box {
				img {
					width: 151px;
					height: 46px;
					// filter: invert(1);
				}
			}
			.dianpu-box {
				font-size: 23px;
			}
			.bottom-wrap {
				display: flex;
				.item {
					display: flex;
					flex: 1;
					font-size: 20px;
					font-weight: 600;
					.label {
						width: 120px;
						padding-right: 20px;
					}
					.value {
					}
				}
			}
			.head {
				padding: 20px 25px;
				border-bottom: 1px solid #e5e5e5;
				.title {
					display: flex;
					align-items: center;
					vertical-align: middle;
					&:before {
						content: '';
						vertical-align: middle;
						display: inline-block;
						width: 6px;
						height: 20px;
						margin-right: 20px;
						background: linear-gradient(#fc5f10 0%, #ffa949 100%);
						border-radius: 4px;
					}
					font-weight: bold;
					font-size: 24px;
					color: #333333;
					line-height: 25px;
					text-align: left;
					font-style: normal;
				}
			}
			.input-group {
				display: flex;
				// flex-wrap: wrap;
				gap: 10px;
				/deep/.el-input--prefix .el-input__inner {
					text-align: center;
					// padding-left: 50px;
				}
			}
			.body {
				padding: 20px 40px 20px;
				h3 {
					font-size: 18px;
					padding-bottom: 20px;
					// margin-bottom: 30px;
					margin-top: 30px;
				}
				.row-2 {
					display: flex;
					/deep/.el-radio-group {
						display: flex;
						flex-direction: column;
						gap: 20px;
						// color: #000;
						.el-radio__label {
							font-size: 18px !important;
						}
					}
					.jiao-tip-box {
						display: flex;
					}
					.tips {
						padding-top: 30px;
						padding-right: 82px;
						h4 {
							font-weight: bold;
							font-size: 18px;
							color: #333333;
							line-height: 20px;
							text-align: left;
							padding-bottom: 20px;
							font-style: normal;
						}
						p {
							margin-top: 9px;
							font-weight: 400;
							font-size: 14px;
							color: #333333;
							line-height: 20px;
							text-align: left;
							font-style: normal;
						}
					}
				}

				.tip-box {
					display: flex;
					margin-left: 100px;
					.item {
						padding-right: 80px;
						p {
							font-weight: 600;
							font-size: 16px;
							color: #d30a0a;
							line-height: 26px;
							text-align: left;
							font-style: normal;
						}
					}
				}
				.jiao-box {
					display: flex;
					// padding-left: 200px;
					.item {
						.title {
							padding-bottom: 10px;
							font-weight: 800;
							font-size: 18px;
							color: #333333;
							line-height: 21px;
							text-align: left;
							font-style: normal;
						}
					}
					.item-jiao {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 30px;
						width: 204px;
						height: 204px;
						background: #ffffff;
						border-radius: 10px;
						border: 1px solid #979797;
						.jiao {
							position: relative;
							width: 87px;
							height: 193px;
							img {
								width: 100%;
								height: 100%;
							}
							.dot {
								display: flex;
								align-items: center;
								justify-content: center;
								position: absolute;
								width: 22px;
								height: 22px;
								background: #dceaf9;
								border: 1px solid #333333;
								border-radius: 50%;
								cursor: pointer;
								font-weight: 800;
								font-size: 12px;
								color: #333333;
								line-height: 17px;
								font-style: normal;
							}
						}
						.jiao-1 {
							width: 166px;
							height: 194px;
							img {
							}
						}
						.jiao-2 {
							width: 171px;
							height: 190px;
							img {
							}
						}
					}
				}
				/deep/.el-form.custom-form.el-form--label-top {
					.el-form-item {
						margin-bottom: 20px;
						.el-form-item__label {
							padding: 0;
						}
						.el-input.is-disabled .el-input__inner {
							background: #fff;
							color: #606266;
						}
						.el-input {
							display: inline-flex;
							align-items: center;
							font-size: 16px !important;
							.el-input__inner {
								display: flex;
								align-items: center;
							}
						}
					}
				}
				/deep/.el-textarea__inner {
					font-size: 16px;
				}
				.radioList {
					/deep/.el-radio-group {
						display: flex;
						flex-wrap: wrap;
						gap: 10px;
						.el-radio {
							margin: 0;
							.el-radio__label {
								font-size: 18px !important;
								color: #000;
							}
						}
					}
				}
				.chechbox-list {
					// height: 100px;
					padding-bottom: 24px;
					/deep/.el-checkbox-group {
						display: flex;
						flex-wrap: wrap;
						gap: 10px;
						.el-checkbox {
							margin: 0;
							.el-checkbox__label {
								font-size: 18px !important;
								color: #000;
							}
						}
					}
					.checkbox-inner {
						display: flex;
						align-items: center;
						.title {
							padding-right: 20px;
							font-size: 16px;
							font-size: 18px;
							color: #000;
						}
						input {
							border-bottom: 1px solid @theme;
							width: 40px;
							text-align: center;
						}
						input[disabled] {
							border-bottom: 1px solid #000;
						}
						p {
						}
					}
				}

				.chechbox-list-2 {
					display: flex;
					gap: 30px;
					.checkbox-list-4 {
						/deep/.el-checkbox-group {
							padding-top: 10px;
							display: flex;
							flex-wrap: wrap;
							gap: 10px;
						}
					}
					.item-checkbox {
						display: flex;
						flex-direction: column;
						width: calc(100% / 4);
						.checkbox {
							/deep/.el-checkbox {
								margin: 0;
								.el-checkbox__label {
									font-size: 18px !important;
									color: #000;
								}
							}
						}
						.radio {
							padding-top: 20px;
							/deep/.el-radio-group {
								display: flex;
								flex-wrap: wrap;
								gap: 10px;
								.el-radio {
									margin: 0;
									.el-radio__label {
										font-size: 18px !important;
										color: #000;
									}
								}
							}
						}
					}
				}
				.chechbox-list-3 {
					// height: 100px;
					padding-bottom: 24px;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					gap: 20px;
					.checkbox-item {
					}
					/deep/.el-checkbox-group {
						display: flex;
						flex-wrap: wrap;
						gap: 10px;
						.el-checkbox {
							margin: 0;
						}
					}
					.checkbox-inner {
						display: flex;
						align-items: center;
						.title {
							padding-right: 20px;
							font-size: 18px;
							color: #000;
						}
					}
				}
			}
		}
	}
}
</style>
